<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table class="table table-striped table-bordered table-hover ">
        <tr>
            <td>商品id</td>
            <td>商品名称</td>
            <td>商品单价</td>
            <td>商品余量</td>
        </tr>
        <tr v-for="pro in proList">
            <td>{{pro.productid}}</td>
            <td>{{pro.productname}}</td>
            <td>{{pro.productprice}}</td>
            <td>{{pro.productnum}}</td>
            <td><input type="button" value="修改" @click="toEditPro(pro)"/></td>
        </tr>
    </table>
</div>

<script>
    var app = new Vue({
        el: '#app',//我需要和那个区域做绑定
        data: {//数据
            proList:[]
        },
        methods:{
            toEditPro:function (proinfo){
                window.location.href="/product/selectbyid1?productid="+proinfo.productid;
            }
        }
    })
    $.ajax({
        url:"/product/selectAll",
        data:{},
        dataType:"json",
        type:"get",
        success:function (returndata) {
            app.proList=returndata;
        }
    })
</script>
</body>
</html>